<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        html,body{
            background-color: #FFFFFF;
            /*background: transparent;*/
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .name-block {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.00rem;
            height: 0.45rem;
            border-radius: 0.28rem;
            border-style: solid;
            border-width: 0.01rem;
            border-color: #A0522C;
            font-size: 0.16rem;
            color: #231313;
            margin-left: 0.11rem;
            margin-right: 0.11rem;
            margin-top: 0.30rem;
        }
    </style>
</head>
<body>
<div id="name-list" class="flex" style="width: 100%; flex-wrap: wrap;"></div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var nameListEl;
    var pageNum = 1;
    apiready = function () {
        nameListEl = $api.byId('name-list');

        getNameList();

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:1000
            }
        }, function(ret, err){
            getNameList();
        });

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getNameList() {
        var temApiHeader = {
            "Content-Type": "application/json",
        };
        api.ajax({
            url: apiUrl + '/tools/baby-name',
            tag: '/tools/baby-name',
            method: 'post',
            headers: temApiHeader,
            data: {
                body: {
                    // token: $api.getStorage("token"),
                    family_name: api.pageParam.family_name,
                    sex: api.pageParam.sex,
                    length: api.pageParam.num,
                    page_size: 60,
                    page_num: pageNum,
                    // birth_year: api.pageParam.birth_year,
                    // birth_month: api.pageParam.birth_month,
                    // birth_day: api.pageParam.birth_day,
                    // birth_hour: api.pageParam.birth_hour,
                    // birth_minute: api.pageParam.birth_minute,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var nameListData = ret.data;
                    if (pageNum <= nameListData.PageTotal) {
                        // if ((pageNum-1)*20 <= 1) {
                        nameListData = nameListData.name_list;
                        for (var i=0,leni=nameListData.length; i<leni; i++)
                        {
                            $api.append(nameListEl,
                                '<div class="flex name-block" tapmode onclick="openNameDetailWin(this)">' +
                                    '<p>' + nameListData[i] + '</p>' +
                                '</div>');
                        }
                    }
                    pageNum ++;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openNameDetailWin(el) {
        var name = $api.text(el);
        api.openWin({
            name: 'nameDetailWin',
            url: './nameDetailWin.html',
            slidBackType: 'edge',
            pageParam: {
                name: name,
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
